<template>
  <div class="crumbs main-layer">
    <div class="top">
      <template v-if="bread && bread.length">
        当前位置：
        <router-link :to="{ name: 'Home' }">首页</router-link>
        <span v-for="(item, idx) in bread" :key="idx" @click="goto(item)"> > {{ item.label }}</span>
      </template>
    </div>
    <div class="crumbs-content">
      <c-content-top :label="$route.meta.name" v-if="contentTop">
        <template #right>
          <slot name="contentTopRight"></slot>
        </template>
      </c-content-top>

      <slot name="content"></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import CContentTop from "@/components/CContentTop.vue";

@Component({
  name: "Crumbs",
  components: {
    CContentTop
  }
})
export default class Crumbs extends Vue {
  @Prop({
    default: () => []
  })
  bread!: Common.CBread[];

  @Prop({
    default: true
  })
  contentTop!: boolean;

  private goto(item: Common.CBread) {
    if (item.url) {
      location.href = item.url;
    } else if (item.to) {
      this.$router.push(item.to);
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/style/mixin.less";
.crumbs {
  background: #ffffff;
  border-radius: 4px 4px 0px 0px;
  box-shadow: 0px 3px 24px 1px rgba(83, 155, 239, 0.22);
  margin-top: 40px;
  min-height: 650px;
  position: relative;

  .top {
    padding-left: 52px;
    height: 38px;
    line-height: 38px;
    background: #f8fafd;
    border-bottom: 1px solid #e7ecf9;
    background: url("./images/bg-1.png") 30px center no-repeat #f8fafd;
    background-size: 14px 13px;
    color: #737278;
    & > span {
      cursor: pointer;
      &:last-child {
        cursor: text;
      }
    }

    & > a {
      color: #737278;
    }
  }

  .crumbs-content {
    overflow: hidden;
    .scale(padding-left, 30px);
    .scale(padding-right, 30px);
  }
}
</style>
